<template>
  <div>
    <q-uploader
        label="图标上传"
        auto-upload
        url="/v1/common-api/upload/icon/"
        @uploaded="handleAvatarSuccess"
        field-name="file"
        accept="image/*"
        :max-file-size="2*1024*1024"
    >
      <template v-slot:list>
        <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
        <span v-else>
                    点击右上角 <q-icon size="sm" name="add_box"/> 上传
                </span>
      </template>
    </q-uploader>
  </div>
</template>

<script>
export default {
  name: 'IconUpload',
  props: {
    value: String
  },
  data () {
    return {
      imageUrl: this.value
    }
  },
  watch: {
    value () {
      this.imageUrl = this.value
    }
  },
  methods: {
    handleAvatarSuccess (info) {
      const { xhr } = info
      const data = JSON.parse(xhr.response).data
      this.$emit('input', data)
    }
  }
}
</script>

<style scoped>

</style>
